<template>
    <v-chart :option="option" style="height: 600px;width: 600px;"></v-chart>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Axios from 'axios';
import * as echarts from 'echarts';
import 'echarts-gl'
const option = ref({});
const datas = [
    { name: '中江县', value: 10 },
    { name: '什邡市', value: 20 },
    { name: '广汉市', value: 40 },
    { name: '旌阳区', value: 50 },
    { name: '绵竹市', value: 60 },
    { name: '罗江区', value: 70 },

]

const lineMaxHeight = () => {
    const maxValue = Math.max(...datas.map(item => item.value))
    return 0.1 / maxValue
}
// 柱状体的主干
const lineData = () => {
    return datas.map((item) => {
        return {
            coords: [a[item.name], [a[item.name][0], a[item.name][1] + item.value * lineMaxHeight()]]
        }
    })
}
// 柱状体的顶部
const scatterData = () => {
    return datas.map((item) => {
        return [a[item.name][0], a[item.name][1] + item.value * lineMaxHeight()]
    })
}
// 柱状体的底部
const scatterData2 = () => {
    return datas.map((item) => {
        return {
            name: item.name,
            value: a[item.name]
        }
    })

}
// 柱状体的顶部
const scatterData3 = () => {
    return datas.map((item) => {
        return [a[item.name][0], a[item.name][1] + item.value * lineMaxHeight()]
    })
}
const a: any = {};
onMounted(async () => {
    const response = await Axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510600_full.json');
    const mapData = response.data;
    echarts.registerMap('德阳市', mapData); // 注册地图
    for (const obj of mapData.features) {
        const name = obj.properties.name;
        const center = obj.properties.center;
        a[name] = center;
    }
    option.value = {

        series: [
            // map
            {
                geoIndex: 1,//当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性
                showLegendSymbol: true,//在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。
                type: 'map',
                roam: true,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: datas
            },
            // 柱状体的主干
            {
                type: 'lines',
                zlevel: 5,
                lineStyle: {
                    width: 20, // 线条宽度
                    color: 'rgb(11, 254, 197, .6)',
                    opacity: 1, // 线条透明度
                },
                data: lineData()
            },
            // 柱状体的顶部三角形
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,
                symbol: 'image://src/assets/2.png ',
                symbolSize: [10, 10],
                symbolOffset: [0, -15],
                itemStyle: {
                    color: 'rgb(11, 254, 197)',
                    opacity: 1,
                },
                label: {
                    show: true,
                    formatter: function (params: any) {
                        return datas[params.dataIndex].value
                    },
                    position: "top"
                },
                silent: true,
                data: scatterData3()
            },
            //顶部
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,

                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    color: 'rgb(11, 254, 197)',
                    opacity: 1
                },
                silent: true,
                data: scatterData()
            },
            // 柱状体的底部
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 4,
                label: {
                    // 这儿是处理的
                    formatter: '{b}',
                    position: 'bottom',
                    color: '#fff',
                    fontSize: 12,
                    distance: 10,
                    show: true
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    // color: '#F7AF21',
                    color: 'rgb(11, 254, 197)',
                    opacity: 1
                },
                silent: true,
                data: scatterData2()
            },

        ],

        geo: [
            {
                map: '德阳市',
                aspectScale: 0.9,//地图长宽比
                roam: false, // 是否允许缩放
                zoom: 1.2, // 默认显示级别
                layoutSize: '60%',//地图大小
                layoutCenter: ['54%', '50%'],//地图位置偏移

                itemStyle: {
                    //正常样式
                    normal: {
                        areaColor: 'rgb(17, 126, 120)',
                        borderColor: 'rgb(56, 213, 202)',
                        borderWidth: 1,
                        shadowColor: 'rgb(1, 100, 93)',
                        shadowOffsetY: 5,
                        shadowOffsetX: 1,
                        shadowBlur: 2
                    },
                    //鼠标haver样式
                    emphasis: {
                        areaColor: 'rgb(46, 172, 164)'
                    }
                },
                emphasis: {
                    label: {
                        show: false,
                    }
                },
                zlevel: 3//层级
            },
            // {
            //   map: '德阳市',
            //   aspectScale: 0.9,
            //   roam: false, // 是否允许缩放
            //   zoom: 1.2, // 默认显示级别
            //   layoutSize: '60%',
            //   layoutCenter: ['53%', '50%'],
            //   itemStyle: {
            //     normal: {
            //       borderColor: 'rgb(56, 202, 192)',
            //       borderWidth: 2,
            //       shadowColor: '#2C99F6',
            //       shadowOffsetY: 0,
            //       shadowBlur: 10,
            //       areaColor: 'rgb(56, 202, 192)'
            //     }
            //   },
            //   zlevel: 2,
            //   silent: true//图形是否不响应和触发鼠标事件
            // },
            {
                map: '德阳市',
                aspectScale: 0.9,
                roam: false, // 是否允许缩放
                zoom: 1.2, // 默认显示级别
                layoutSize: '60%',
                layoutCenter: ['54%', '52%'],
                itemStyle: {
                    // areaColor: '#005DDC',
                    areaColor: 'rgba(5, 130, 121,0.5)',
                    borderColor: 'rgb(104, 180, 205)',
                    borderWidth: 0.1
                },
                zlevel: 1,
                silent: true
            },

        ],
    };
});
</script>
  